<template>
	<view class="content">
		<image class="backImg" :src="backImg" mode="widthFix"></image>
		<view class="title-view" :style="{'margin-top':magringTopTitle+'px'}">{{title}}</view>
		<view class="userImg-box" @click="gotoLogin">
			<image class="user-img" :src="userImg" mode=""></image>
			<view class="user-name">{{userName}}</view>
		</view>
		<view class="user-money-box">
			<view class="user-money-box-item" @click="gotoWalletFun">
				<view class="user-money-box-item-top"> <text>￥</text>{{userMoney}} </view>
				<view class="user-money-box-item-bottom">用户余额</view>
			</view>
			<view class="user-money-box-item" @click="gotoWalletFun">
				<view class="user-money-box-item-top"> <text>￥</text>{{userMoneyed}} </view>
				<view class="user-money-box-item-bottom">待结算金额</view>
			</view>
		</view>
		<view class="myOrder-box">
			<view class="myOrder-box-title">
				<view class="myOrder-box-title-left">我的订单</view>
				<view class="myOrder-box-title-right" @click="gotoOrder" :data-id='0'>查看更多</view>
			</view>
			<view class="order-item-box">
				<view class="order-item-box-item" v-for="(item,index) in orderItem" :key='index' :data-index='index' :data-id='item.id' @click="gotoOrder" >
					<image class="order-item-img" :src="item.imgurl" mode=""></image>
					<view class="order-item-text">{{item.name}}</view>
				</view>
				
			</view>
		</view>
		<image style="width: 100%;" :src="beijing03" mode="widthFix" ></image>
		<view class="moreService-box">
			<view class="myOrder-box-title">
				<view class="myOrder-box-title-left">更多服务</view>
				<view class="myOrder-box-title-right"></view>
			</view>
			<view class="more-item-box">
				<view class="more-item-box-big"> 
					<view class="more-item-box-item" @click="gotorecovery">
						<image class="more-item-img" :src="huiImg" mode=""></image>
						<text>回收人员</text>
					</view>
					<view class="more-item-box-item" @click="gotoWalletFun">
						<image class="more-item-img" :src="qbImg" mode=""></image>
						<text>我的钱包</text>
					</view>
					<view @click="gotoAddress" class="more-item-box-item">
						<image class="more-item-img" :src="dzImg" mode=""></image>
						<text>地址管理</text>
					</view>
					<view class="more-item-box-item" @click="gotoSet">
						<image class="more-item-img" :src="szImg" mode=""></image>
						<text>个人设置</text>
					</view>
				</view>
				<view class="more-item-box-big">
					<view class="more-item-box-item" @click="gotoNews">
						<image class="more-item-img" :src="xxImg" mode=""></image>
						<text>消息管理</text>
					</view>
					<view class="more-item-box-item" @click="gotoHelp">
						<image class="more-item-img" :src="helpImg" mode=""></image>
						<text>帮助中心</text>
					</view>
					<view class="more-item-box-item"></view>
					<view class="more-item-box-item"></view>
				</view>
				
			</view>
		</view>
		<image style="width: 100%;" :src="beijing03" mode="widthFix" ></image>
		<view class="content-lianxi" >
			<view class="content-lianxi-top">羽希网络科技提供技术支持</view>
			<view @click="fuzhi_fun" class="content-lianxi-bottom">联系电话/微信：13728737944</view>
		</view>
		<tab-bar :selectPath='nowPath'></tab-bar>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import tabBar from '../../components/tabBar/tabBar.vue'
	
	export default{
		data(){
			return{
				backImg:baseUrl+'/uploads/static/image/recovery_my_big_bg@2x.png',
				userImg:baseUrl+'/uploads/static/image/recovery_my_top_head@2x.png',
				beijing03:baseUrl+'/uploads/static/image/recovery_index_reserve_bg_03@2x.png',
				huiImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_hsry@2x.png',
				qbImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_wdqb@2x.png',
				dzImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_dzgl@2x.png',
				szImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_grsz@2x.png',
				xxImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_xxgl@2x.png',
				helpImg:baseUrl+'/uploads/static/image/recovery_my_more_icon_bzzx@2x.png',
				nowPath:'/'+this.$mp.page.route, //当前路径
				magringTopTitle:0,
				title:'我的',
				userName:'用户名',
				userMoney:0.00,
				userMoneyed:0.00,
				isLogin:false,//是否登录
				orderItem:[
					{
						name:'待接单',
						id:'0',
						imgurl:baseUrl+'/uploads/static/image/recovery_my_order_icon_djd@2x.png'
					},
					{
						name:'已接单',
						id:'1',
						imgurl:baseUrl+'/uploads/static/image/recovery_my_order_icon_yjd@2x.png'
					},
					{
						name:'已完成',
						id:'2',
						imgurl:baseUrl+'/uploads/static/image/recovery_my_order_icon_ywc@2x.png'
					},
					{
						name:'待评价',
						id:'3',
						imgurl:baseUrl+'/uploads/static/image/recovery_my_order_icon_dpj@2x.png'
					}
				],
				
			}
		},
		onLoad(){
			//计算右上角高度
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.magringTopTitle = menuButtonInfo.top
			
		},
		onShow() {
			const X_Auth_Token = uni.getStorageSync('X-Auth-Token')
			this.isLogin = X_Auth_Token
			this.getUserNews()
		},
		methods:{
			getUserNews(){
				if(this.isLogin){
					http.getUserInfo().then((res)=>{
						if(res.data.code == 1){
							let userInfo = JSON.stringify(res.data.data) 
							uni.setStorageSync('userInfo',userInfo)
							this.userMoneyed = res.data.data.info.sett_amount
							this.userMoney = res.data.data.info.money
							this.userImg = res.data.data.info.avatar
							this.userName = res.data.data.info.nickname
						}
					})
				}
			},
			gotoLogin(){
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			gotoOrder(e){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					let id = e.currentTarget.dataset.id
					uni.navigateTo({
						url:'/pages/my/orderList?id='+id
					})
				}
			},
			gotorecovery(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					let userInfo = JSON.parse(uni.getStorageSync('userInfo')) 
					if(userInfo.recycler.rz_status == '-1'){
						uni.navigateTo({
							url:'/pages/recoveryCenter/unregistered'
						})
					}else if(userInfo.recycler.rz_status == '1'){
						uni.navigateTo({
							url:'/pages/recoveryCenter/recoveryCenter'
						})
					}else if(userInfo.recycler.rz_status == '0'){
						uni.navigateTo({
							url:'/pages/recoveryCenter/recoveryLoading'
						})
					}else if(userInfo.recycler.rz_status == '2'){
						uni.navigateTo({
							url:'/pages/recoveryCenter/recoveryError'
						})
					}
				}
			},
			gotoAddress(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.navigateTo({
						url:'/pages/my/addressManage'
					})
				}
			},
			gotoNews(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.navigateTo({
						url:'/pages/my/newsCenter'
					})
				}
			},
			gotoWalletFun(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.navigateTo({
						url:'/pages/my/wallet'
					})
				}
			},
			gotoSet(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.navigateTo({
						url:'/pages/my/personSet'
					})
				}
			},
			gotoHelp(){
				if(!this.isLogin){
					uni.showModal({
						title: '提示',
						content: '请前去登录~',
						success: function (res) {
							if (res.confirm) {
								//未登录
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.navigateTo({
						url:'/pages/my/helpCenter'
					})
				}
			},
			fuzhi_fun(){
				uni.setClipboardData({
					data: '13728737944',
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			}
		},
		components:{
			tabBar
		}
		
	}
</script>

<style>
	.content{
		width: 100%;
		overflow: hidden;
		font-family: 'PingFang Bold';
	}
	.title-view{
		width: 100%;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #333;
		font-weight: bold;
	}
	.backImg{width: 100%;position: absolute;z-index: -1;top: 0;left: 0;}
	.userImg-box{width: 100%;box-sizing: border-box;padding-left: 30px;display: flex;flex-direction: row;align-items: center;margin-top: 20px;margin-bottom: 20px;}
	.user-img{width: 50px;height: 50px;margin-right: 10px;border-radius: 50%;}
	.user-name{font-size: 18px;color: #333;}
	.user-money-box{width: 100%;height: 75px; display: flex;flex-direction: row;align-items: center;}
	.user-money-box-item{flex: 1;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.user-money-box-item-top{font-size: 24px;color: #333;font-weight: bold;}
	.user-money-box-item-top text{font-size: 10px;}
	.user-money-box-item-bottom{font-size: 12px;color: #999;margin-top: 2px;}
	.myOrder-box{width: calc(100% - 24px);margin: 0 auto;margin-top: 10px;background-color: #fff;border-radius: 10px;box-sizing: border-box;padding: 20px 20px 0px 20px;}
	.myOrder-box-title{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.myOrder-box-title-left{font-size: 17px;font-weight: bold;}
	.myOrder-box-title-right{font-size: 14px;color: #999;}
	.order-item-box{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 15px;}
	.order-item-box-item{width: 56px;text-align: center;}
	.order-item-img{width: 56px;height: 56px;display: block;}
	.order-item-box-item .order-item-text{font-size: 14px;color: #333;}
	.moreService-box{width: calc(100% - 24px);margin: 0 auto;background-color: #fff;border-radius: 10px;box-sizing: border-box;padding: 5px 20px 0px 20px;}
	.more-item-box{margin-top: 5px;width: 100%;overflow: hidden;}
	.more-item-box-big{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.more-item-box-item{width: 60px;text-align: center;overflow: hidden;margin-top:10px;}
	.more-item-img{width: 24px;height: 24px;margin: 10px auto;display: block;}
	.more-item-box-item:nth-of-type(4n+1){margin-left: 0px;}
	.more-item-box-item text{font-size: 14px;color: #333;}
	.content-lianxi{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 50px;font-size: 14px;}
	.content-lianxi-top{color: #999;margin-bottom: 8px;}
	.content-lianxi-bottom{color:#1c8cff;}
</style>